<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <!--position 属性指定了元素的定位类型。-->
    <!--position 属性的四个值：-->
    <!--static-->
    <!--relative-->
    <!--fixed-->
    <!--absolute-->
    <!--元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。-->
    <!--static 定位-->
    <!--HTML元素的默认值，即没有定位，元素出现在正常的流中。-->
    <!--静态定位的元素不会受到 top, bottom, left, right影响。-->
    <!--fixed 定位-->
    <!--元素的位置相对于浏览器窗口是固定位置。-->
    <!--即使窗口是滚动的它也不会移动：-->
    <style>
        p.pos_fixed
        {
            position: fixed;
            top:30px;
            right: 5px;
        }
    </style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意：</b>IE7和IE8支持只有一个！DOCTYPE指定固定值.</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</body>
</html>